<template>
	<ui-sys img="../../static/user/userBackground.png">

		<ui-navbar back opacity>
			<view class="p-2 flex-bar flex-sub" v-if="sys_scrollTop > sys_navBar">
				<text class="text-lg cicon-back  " @tap="navigateBack()">返回</text>
			</view>
			<view class="p-2 flex-bar flex-sub" v-else>
				<text class="text-lg cicon-back  text-white" @tap="navigateBack()"></text>
			</view>
			<view class="flex-bar">
				<!-- #ifdef MP -->
				<view :style="{width:`${sys_capsule.width + 10}px`,height:`${sys_capsule.height}px`}">
					<view> 12</view>
				</view>
				<!-- #endif -->
			</view>
		</ui-navbar>
		<view class="nav" opacity>
			<view class="user">
				<image class="headPicture" :src="userInfo.avatarUrl" mode="scaleToFill"></image>
				<view class="info">
					<view class="nickname">{{ userInfo.nickName }}
						<!-- v-if="userInfo.authentication"  -->
						<image class="auth" src="../../static/user/auth.png">
						</image>
					</view>
					<view class="sign">{{ userInfo.slogan }}</view>
				</view>
				<!-- 关注/编辑 -->
				<!-- 不是自己 -->
				<view v-if="!isSelf" class="follow">
					<text class="cicon-add" v-if="!attentionUser" style=" font-size: 35rpx;color: #FFDB86">
					</text>
					<text>{{ attentionUser ? "取消关注" : "关注" }}</text>
				</view>
				<!--  自己 -->
				<view v-else class="edit">
					<text class="cicon-quill" v-if="!attentionUser"
						style="margin-right: 10rpx; color: #FFDB86;font-size: 30rpx;" name="pencil-fill">
					</text>
					<text>编辑</text>
				</view>
			</view>
			<!-- 卡片 -->
			<view class="card">
				<!-- 粉丝数(k) -->
				<view class="fans">{{ userInfo.fansCount }}</view>
				<view class="fansTip">粉丝数奇高，大佬跑不掉了～</view>
				<!-- 详细信息 -->
				<view class="bottom">
					<view class="item left">出过<text>{{ userInfo.issueCount }}</text>道题目</view>
					<view class="item right">解答<text>{{ userInfo.explainCount }}</text>次题解</view>
				</view>
				<!-- 被采纳 -->
				<view class="adopt"> 被采纳过{{ userInfo.adoptedCount }}次 </view>
			</view>
		</view>
		</view>

		<ui-fixed sticky :val="0">
			<ui-tab :tab="['已发布','已解答']" tpl="trapezoid" align="flex-center" style="height:80rpx;" @change="tabChange">
			</ui-tab>
		</ui-fixed>
		<view class="cardBg" v-if="selectTab==0">
			<view class="itemCard" v-for="item in publishList.data" :key="item.qid" @tap="toQuestion(item.qid)">
				<view class="itemBody">
					<!-- 可能有图片 -->
					<view class="images" v-if="item.coverUrls&&item.coverUrls.length > 0">
						<image v-for="(img, index) in item.coverUrls" :key="index" :src="img" mode="scaleToFill">
						</image>
						<!-- 						<image
							src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1441836571,2166773131&fm=26&gp=0.jpg"
							mode="scaleToFill"></image>
						<image
							src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1441836571,2166773131&fm=26&gp=0.jpg"
							mode="scaleToFill"></image> -->
					</view>
					<view class="main">
						<view class="mainTitle">{{ item.title }}</view>
						<view class="mainContent">{{ item.des }}</view>
						<!-- 时间 -->
						<view class="mainCreateTime">
							<view class="cicon-time-o"></view>
							<text>{{
			              item.uploadTime
			            }}</text>
						</view>
					</view>
				</view>
			</view>

			<template v-if="publishList.data.length === 0">
				<view class="ui-BG radius">
					<ui-title class="mt-3" title="ta还没发布过题目" titleColor="text-blue" descColor="text-cyan" desc="Carefully chosen" tpl="center-column" hasDot></ui-title>
				</view>
			</template>

		</view>

		<view class="cardBg" v-if="selectTab==1">
			<view class="itemCard" v-for="item in  explanationList.data" :key="item.eid" @tap="toQuestion(item.questionMiniVO.qid)">
				<view class="itemCardTop">
					<image class="headPicture" :src="userInfo.avatarUrl" mode="scaleToFill"></image>
					<view class="nickname">{{
			      userInfo.nickName
			    }}</view>
				</view>
				<view class="itemBody">
					<!-- 可能有图片 -->
					<view class="images" v-if="item.coverUrls&&item.coverUrls.length > 0">
						<image v-for="(img, index) in item.coverUrls" :key="index" :src="img" mode="scaleToFill">
						</image>
						<!-- 						<image
							src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1441836571,2166773131&fm=26&gp=0.jpg"
							mode="scaleToFill"></image>
						<image
							src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1441836571,2166773131&fm=26&gp=0.jpg"
							mode="scaleToFill"></image> -->
					</view>
					<view class="main">
						<view class="mainTitle">{{ item.title }}</view>
						<view class="mainContent">{{item.des}}</view>
					</view>
				</view>
			</view>
			<template v-if="explanationList.data.length === 0">
				<view class="ui-BG radius">
					<ui-title class="mt-3" title="ta还在学习中,暂无解答" titleColor="text-blue" descColor="text-cyan" desc="Carefully chosen" tpl="center-column" hasDot></ui-title>
				</view>
			</template>
		</view>
	</ui-sys>
</template>

<script>
	import {
		userInfoRequest
	} from '@/api/login.js';

	import {
		explainsByUidRequest,
		questionsByUidRequest,
		explainsByQidRequest,
	} from '@/api/question.js'
	import {
		getStorageUserInfo
	} from '@/utils/storageUtils.js';


	export default {
		data() {
			return {
				// 选中tab
				selectTab: 0,
				// 是否是自己
				isSelf: true,
				// 是否是粉丝
				attentionUser: false,
				loginnedUserInfo: {},
				userInfo: {},
				// 发布题目
				publishList: {
					data: [],
				},
				//  解答题目
				explanationList: {
					data: []
				}
			};
		},
		onLoad(params) {
			this.loginnedUserInfo = getStorageUserInfo()
			this.getUserInfo(params.userID)
			this.getQuestions(params.userID)
			this.getExplains(params.userID)
		},

		methods: {
			getUserInfo(uid) {
				const param = {
					uid
				}
				userInfoRequest(param).then(res => {
					if (res.code == 200) {
						this.userInfo = res.data
						this.isSelf = this.loginnedUserInfo.uid === this.userInfo.uid
					} else {
						this.$Tips(res.msg);
					}
				})
			},
			getQuestions(uid) {
				const param = {
					uid
				}
				questionsByUidRequest(param).then(res => {
					if (res.code == 200) {
						this.publishList.data = res.data
						console.log('题目', res.data)
					} else {
						this.$Tips(res.msg);
					}
				})
			},
			getExplains(uid) {
				const param = {
					uid
				}
				explainsByUidRequest(param).then(res => {
					if (res.code == 200) {
						this.explanationList.data = res.data
						console.log('题解', res.data)
					} else {
						this.$Tips(res.msg);
					}
				})
			},
			// 返回
			navigateBack() {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			// 切换tab 栏
			tabChange(data) {
				this.selectTab = data.index
			},
			// 跳转到 题目详情页
			toQuestion(qid) {
				uni.navigateTo({
					url: `/pages/question/detail?id=${qid}`,
					animationType: 'pop-in',
					animationDuration: 200
				});
			}
			// 
		}
	}
</script>


<style lang="scss" scoped>
	@import "../../utils/common.scss";

	.nav {
		position: relative;
		margin-bottom: 20rpx;


		.user {
			position: relative;


			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: calc(100% - 50rpx - 32rpx);
			margin: 0 auto;
			margin-top: 30rpx;

			.headPicture {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: 2px solid #fff;
			}

			.info {
				width: 400rpx;
				margin-left: 24rpx;

				.nickname {
					font-size: 32rpx;
					color: #FFFFFF;
					font-weight: bold;

					.auth {
						width: 32rpx;
						height: 32rpx;
						margin-left: 12rpx;
					}
				}

				.sign {
					width: 100%;
					font-size: 24rpx;
					margin-top: 8rpx;
					color: #e7ecfd;
					opacity: 0.7;
					@include text-ellipsis(2);
				}
			}

			.follow {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				display: flex;
				justify-content: center;
				align-items: center;
				background: #4e5bf6;
				border-radius: 13px;
				font-size: 24rpx;
				color: #e4e5ff;
				padding: 8rpx 24rpx;

				text {
					//   margin-right: 6rpx;
				}

				&:active {
					opacity: 0.7;
				}
			}

			.edit {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				display: flex;
				justify-content: center;
				align-items: center;
				background: #5D6AF6;
				font-size: 24rpx;
				color: #e4e5ff;
				padding: 8rpx 24rpx;
				border-radius: 13px;

				&:active {
					opacity: 0.7;
				}
			}
		}

		.card {
			position: relative;
			margin: 0 auto;
			margin-top: 40rpx;
			width: 690rpx;
			height: 252rpx;
			background: url(../../static/user/card.png) no-repeat center / 100%;
			box-shadow: 0px 3px 10px 0px rgba(101, 118, 181, 0.16);
			overflow: hidden;

			.fans {
				font-size: 60rpx;
				color: #384af6;
				margin-top: 24rpx;
				text-align: center;
				font-weight: bold;
			}

			.fansTip {
				font-size: 24rpx;
				text-align: center;
				color: #7e84c0;
				margin-top: 2rpx;
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item {
					width: 50%;
					text-align: center;
					font-size: 24rpx;
					margin-top: 32rpx;
					color: #6573ff;

					text {
						font-weight: bold;
						font-size: 28rpx;
					}
				}

				.left {
					border-right: 2rpx solid rgba(101, 115, 255, 0.1);
				}
			}

			.adopt {
				position: absolute;
				right: 0;
				top: 20rpx;
				padding: 10rpx 20rpx;
				background: linear-gradient(270deg, #6ab7fd 0%, #676bf6 100%);
				border-radius: 100px 0px 0px 100px;
				font-size: 20rpx;
				color: #e4f1fd;
			}
		}



	}

	.cardBg {
		background-color: #FFFFFF;
		padding-bottom: 30rpx;
		padding-top: 20rpx;
	}

	.itemCard {
		width: 630rpx;
		padding: 30rpx;
		box-shadow: 0px 3px 10px 0px rgba(97, 108, 150, 0.2);
		border-radius: 8px;
		margin: 0 auto;
		margin-bottom: 20rpx;

		&:not(:first-child) {
			border-top: 2rpx solid #f1f3fc;
		}

		.itemCardTop {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.headPicture {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				border: 2px solid #fff;
			}

			.nickname {
				font-size: 28rpx;
				margin-left: 16rpx;
			}
		}

		.itemBody {
			.images {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 20rpx;

				image {
					width: 216rpx;
					height: 162rpx;
					border-radius: 15rpx;

					&:not(:first-child) {
						margin-left: 22rpx;
					}
				}
			}

			.main {
				width: 100%;
				margin-top: 20rpx;
				font-size: 28rpx;

				.mainTitle {
					@include text-ellipsis(2);
				}

				.mainContent {
					color: #666666;
					font-size: 26rpx;
					margin-top: 20rpx;
					word-wrap: break-word;
					@include text-ellipsis(3);
				}

				.mainCreateTime {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					color: #666666;
					margin-top: 20rpx;
					font-size: 25rpx;

					view {
						font-size: 30rpx;
						color: #666666;
					}

					text {
						margin-left: 10rpx;
					}
				}
			}
		}
	}
</style>
